<template>
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main">
      <div class="jsbos-common-page-header">
        <el-page-header @back="goBack" content="详情" />
        <div class="options">
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <el-row
        v-loading="loading"
        :gutter="15"
        class="main"
        :style="{ margin: '0 16px', width: '100%' }"
      >
        <el-form
          ref="elForm"
          :model="dataForm"
          size="small"
          label-width="100px"
          label-position="right"
        >
          <template v-if="!loading">
            <el-col :span="24">
              <el-form-item label-width="0">
                <groupTitle content-position="left" content="基础信息">
                </groupTitle>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="名称" prop="name">
                <p>{{ dataForm.name }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分类" prop="categoryId">
                <p>{{ dataForm.categoryId }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="有效期" prop="expiredType">
                <p>
                  {{ dataForm.expiredType | dynamicText(expiredTypeOptions) }}
                </p>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="有效期时长" prop="expiredDay">
                <p>{{ dataForm.expiredDay }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="证书介绍" prop="description">
                <p>{{ dataForm.description }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="有效标志" prop="enabledMark">
                <p>
                  {{ dataForm.enabledMark | dynamicText(enabledMarkOptions) }}
                </p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0">
                <groupTitle content-position="left" content="设置坐标">
                </groupTitle>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="证书图片" prop="cover">
                <el-image
                  class="info-image"
                  width="300"
                  :src="define.comUrl + dataForm.cover.url"
                  :preview-src-list="[...(define.comUrl + dataForm.cover.url)]"
                  fit="cover"
                ></el-image>
              </el-form-item>
            </el-col>
          </template>
        </el-form>
      </el-row>
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import PrintBrowse from "@/components/print-browse/index.vue";
import jsbos from "@/utils/jsbos";

export default {
  components: { PrintBrowse },
  props: [],
  data() {
    return {
      visible: false,
      loading: false,
      printBrowseVisible: false,
      printId: "",
      dataForm: {
        id: "",
        name: "",
        categoryId: "",
        expiredType: "1",
        expiredDay: 1,
        description: "",
        fieldConfig: "", //字段配置存储字段
        enabledMark: "1",
        creatorUserId: "",
        creatorTime: "",
        cover: [],
      },
      expiredTypeOptions: [
        { fullName: "永久有效", id: "1" },
        { fullName: "有效周期", id: "0" },
      ],
      enabledMarkOptions: [
        { fullName: "待发布", id: "0" },
        { fullName: "已发布", id: "1" },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    dataInfo(dataAll) {
      let _dataAll = dataAll;
      _dataAll.cover = _dataAll.cover ? JSON.parse(_dataAll.cover) : [];
      this.dataForm = _dataAll;
    },

    goBack() {
      this.$emit("refresh");
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url: "/api/course/TemsCert/detail/" + this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.dataInfo(res.data);
            this.loading = false;
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.info-image {
  max-width: 200px;
  height: auto;
}
</style>
